<script>
// import VueAMap from 'vue-amap';
// import AMapLoader from '@amap/amap-jsapi-loader';
// window._AMapSecurityConfig = {
//   securityJsCode: '2026ad6894c60cb697848889a54bf95f'
// };
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
  data() {
    return {
      map: null,
      gasStations: [],
      userLocation: null
    };
  },
  mounted() {
    this.initMap();
    this.getGasStationsNearby();
  },
  methods: {
    initMap() {
      // 使用全局的AMap对象（如果在main.js中已挂载）或重新加载高德地图API并创建地图实例
      if (window.AMap) {
        this.map = new AMap.Map('map-container', {
          zoom: 50,
          center: [116.397428, 39.90923]
        });
      } else {
        AMapLoader.load({
          key: '9e336152b304845112d85b48a5e21c24',
          version: '2.0',
          plugins: ['AMap.Geolocation', 'AMap.PlaceSearch']
        }).then((AMap) => {
          this.map = new AMap.Map('map-container', {
            zoom: 50,
            center: [116.397428, 39.90923]
          });
        }).catch((e) => {
          console.log(e);
        });
      }
    },
    getGasStationsNearby() {
      // 先获取用户当前位置
      if (window.AMap) {
        const geolocation = new AMap.Geolocation();
        geolocation.getCurrentPosition((status, result) => {
          if (status === 'complete') {
            this.userLocation = result.position;
            // 搜索附近充电桩
            this.searchGasStations(this.userLocation);
          } else {
            console.log('定位失败：', result);
          }
        });
      } else {
        AMapLoader.load({
          key: '9e336152b304845112d85b48a5e21c24',
          version: '2.0',
          plugins: ['AMap.Geolocation', 'AMap.PlaceSearch']
        }).then((AMap) => {
          const geolocation = new AMap.Geolocation();
          geolocation.getCurrentPosition((status, result) => {
            if (status === 'complete') {
              this.userLocation = result.position;
              // 搜索附近加油站
              this.searchGasStations(this.userLocation);
            } else {
              console.log('( 定位失败：', result);
            }
          });
        }).catch((e) => {
          console.log(e);
        });
      }
    },
    searchGasStations(location) {
      if (window.AMap) {
        const placeSearch = new AMap.PlaceSearch({
          pageSize: 10,
          pageIndex: 1,
          city: '北京',
          map: this.map,
          autoFitView: true
        });
        placeSearch.searchNearBy('充电桩', location, 2000, (status, result) => {
          if (status === 'complete') {
            this.gasStations = result.poiList.pois;
            this.addGasStationMarkers();
          } else {
            console.log('搜索附近充电桩失败：', result);
          }
        });
      } else {
        AMapLoader.load({
          key: 'b9ebf1495abfabb76269509a1b81833a',
          version: '2.0',
          plugins: ['AMap.Geolocation', 'AMap.PlaceSearch']
        }).then((AMap) => {
          const placeSearch = new AMap.PlaceSearch({
            pageSize: 10,
            pageIndex: 1,
            city: '北京',
            map: this.map,
            autoFitView: true,
            positioning:true
          });
          placeSearch.searchNearBy('充电桩', location, 2000, (status, result) => {
            if (status === 'complete') {
              this.gasStations = result.poiList.pois;
              this.addGasStationMarkers();
            } else {
              console.log('搜索附近充电桩失败：', result);
            }
          });
        }).catch((e) => {
          console.log(e);
        });
      }
    },
    addGasStationMarkers() {
      this.gasStations.forEach((gasStation) => {
        const position = gasStation.location;
        const marker = new AMap.Marker({
          position: position,
          map: this.map
        });
        // 为每个加油站标记添加点击事件，弹出信息窗口显示加油站详细信息
        marker.on('click', () => {
          const content = `充电桩名称：${gasStation.name}<br>地址：${gasStation.address}`;
          const infoWindow = new AMap.InfoWindow({
            content: content,
            offset: new AMap.Pixel(0, -30)
          });
          infoWindow.open(this.map, marker.getPosition());
        });
      });
    },
    onClickLeft(){
      this.$router.push('/shouye')
    }
  },
  created() {

    var token = localStorage.getItem('token');
    if (token === null) {
      this.$router.push('/');
    }
  }
};
</script>

<template>
  <div>
    <van-nav-bar
        title="充电桩"
        left-text="返回"

        left-arrow
        @click-left="onClickLeft"

    />
    <div id="map-container" style="width: 100%; height: 600px;"></div>
    <el-table :data="gasStations">
      <el-table-column prop="name" label="充电桩名称"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column prop="tel" label="电话">
        <template slot-scope="scope">
          <a :href="'tel:'+scope.row.tel">{{scope.row.tel}}</a>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped>

</style>
